<template>
	<div>
		<UserMsgItem v-model:sessionId="sessionId">
			<div class="w-100 chat-box-wrapper" :style="boxStyle">
				<ChatBoxService :sessionId="sessionId" />
				<div class="admin-input-bar row-ac">
					<textarea ref="textareaRef" v-model="messageText" placeholder="Type your message..."
						@input="autoResize" @keyup.enter="sendTextMessageEnter" @focus="onInputFocus"></textarea>
					<button class="btn-send position: relative;" @click="sendTextMessage">Send</button>
				</div>
			</div>
		</UserMsgItem>
	</div>
</template>

<script setup>
	import UserMsgItem from "~/components/UserMsgItem.vue";
	import ChatBoxService from '~/components/ChatBoxService.vue';
	import {
		ref,
		onMounted,
		onUnmounted,
		computed,
		watch
	} from 'vue';
	import {
		useToken
	} from '@/composables/useToken';
	const {
		post
	} = useFetchApi()

	const {
		getToken,
		clearToken
	} = useToken();

	// 登录状态
	const loginStatus = ref(false);

	// 页面尺寸
	const documentWidth = ref(0);
	const documentHeight = ref(0);

	// 当前选中的 sessionId
	const sessionId = ref('');
	const messageText = ref('')
	const textareaRef = ref(null)

	const autoResize = () => {
		if (!textareaRef.value) return
		const el = textareaRef.value
		el.style.height = 'auto'
		el.style.height = Math.min(el.scrollHeight, 38) + 'px'
	}

	const resetTextarea = () => {
		if (textareaRef.value) textareaRef.value.style.height = '22px'
	}

	const onInputFocus = () => {
		setTimeout(() => {}, 300)
	}

	const sendTextMessage = async () => {
		if (!messageText.value.trim()) return
		try {
			await post('/api/chat/create_messages', {
				session_id: sessionId.value,
				content: messageText.value,
				content_img: '',
			})
		} catch (err) {
			console.error('发送失败:', err)
		}
		messageText.value = ''
		resetTextarea()
	}

	// 计算右侧 ChatBox 宽高
	const boxStyle = computed(() => {
		const width = documentWidth.value - 280; // 左侧栏宽度 280px
		const height = documentHeight.value - 60; // 顶部栏高度 60px
		return `width:${width}px;height:${height}px;`;
	});

	// 更新窗口尺寸
	const updateSize = () => {
		if (typeof window !== 'undefined') {
			documentWidth.value = window.innerWidth;
			documentHeight.value = window.innerHeight;
		}
	};

	// 监听 sessionId
	watch(sessionId, (newVal) => {
		console.log('父组件获取到的 sessionId:', newVal);
	});

	onMounted(() => {
		updateSize();
		window.addEventListener('resize', updateSize);

		const token = getToken();
		loginStatus.value = !!token;
	});

	onUnmounted(() => {
		window.removeEventListener('resize', updateSize);
	});

	// 退出登录
	const handleLogout = () => {
		clearToken();
		loginStatus.value = false;
		console.log('已退出登录');
	};
</script>

<style scoped>
	.chat-box-wrapper {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.admin-input-bar {
		width: 100%;
		height: 75px;
		background: #fff;
		border-top: 1px solid #eee;
		box-sizing: border-box;
	}

	textarea {
		flex: 1;
		height: 22px;
		padding: 0.5rem;
		border-radius: 4px;
		border: 1px solid #ccc;
		resize: none;
		outline: none;
		line-height: 1.5;
		font-size: 16px;
		color: #333;
		margin-left: 1rem;
	}

	.btn-send {
		margin-left: 0.5rem;
		margin-right: 1rem;
		padding: 0.6rem 1rem;
		border-radius: 4px;
		border: none;
		color: #fff;
		font-size: 16px;
		background: rgba(0, 0, 0, 0.9);
	}
</style>